<script setup>
import { onMounted, reactive, ref, watch } from 'vue';
import RadioBlock from '../components/RadioBlock.vue';
import { useRoute, useRouter } from 'vue-router';
import { createRecruit} from '../api/recruit';
//初始化
const route = useRoute()
const router = useRouter()
const VisibleOptions = [
    {
        text: "可见",
        value: 1
    },
    {
        text: "不可见",
        value: 0
    }
]
const data = ref({
    pid: route.params.pid,
    title: "",
    introduce: "",
    tags: "",
    visible: 1
})

onMounted(() => {

})
//标签效验规则 不能大于10个标签
const tagsValidator = value => value.split(" ").length <= 10;
//获取项目数据

//提交数据
const onSubmit = () => {
    createRecruit(data.value)
        .then(res => {
            if (res.code == 200) {
                router.push("/project/recruit/" + data.value.pid)
            }
        })
}
</script>

<template>
    <van-form
        @submit="onSubmit"
        label-width="4em"
        style="padding-top: var(--page-padding);min-height:calc(100% - var(--page-padding));background: var(--main-background-color);"
    >
        <van-cell-group inset>
            <van-field
                v-model="data.title"
                :maxlength="50"
                name="name"
                label="招募标题"
                placeholder="请输入招募标题"
                :rules="[{ required: true, message: '不能为空' }]"
            />
            <van-field
                v-model="data.introduce"
                autosize
                :maxlength="1000"
                type="textarea"
                name="introduce"
                label="介绍"
                placeholder="请输入介绍"
            />
            <van-field
                v-model="data.tags"
                autosize
                :maxlength="200"
                type="textarea"
                name="tags"
                label="标签"
                placeholder="设置标签让更多人看到，不同标签请用空格隔开"
                :rules="[{ validator: tagsValidator, message: '标签不能多于10个' }]"
            />
            <van-field name="status" label="招募可见">
                <template #input>
                    <RadioBlock :list="VisibleOptions" v-model:value="data.visible"></RadioBlock>
                </template>
            </van-field>
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block color="var(--main-color)" native-type="submit">创建招募</van-button>
        </div>
    </van-form>
</template>

<style scoped>
.container {
    padding: var(--page-padding) 0px;
}
</style>